<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新的试题模块</h2>
    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写基本信息" />
      <el-step title="创建试题" />
      <el-step title="最终审核" />
    </el-steps>
    <el-form label-width="120px" :model="courseInfo" :rules="dataRule" ref="courseInfo">
      <el-form-item label="标题" prop="title">
        <el-input v-model="courseInfo.title" placeholder=" 庆祝新年答题活动" />
      </el-form-item>

      <el-form-item label="所属题库" prop="ku">
        <paper-ku v-model="courseInfo.kuId"></paper-ku>
      </el-form-item>

      <el-form-item label="总分数" prop="scoreTotal">
        <el-input-number
          :min="50"
          v-model="courseInfo.scoreTotal"
          controls-position="right"
          placeholder="总分数"
        />
      </el-form-item>

      <el-form-item label="总时间" prop="timeHours">
        <el-input-number
          :min="50"
          v-model="courseInfo.timeHours"
          controls-position="right"
          placeholder="总时间"
        />分钟
      </el-form-item>

      <!-- 课程简介-->
      <!-- 课程简介-->
      <el-form-item label="大概简介" prop="descriptions">
        <editor :commits="courseInfo.descriptions" @func="getMsgFormSon" v-if="flag"></editor>
      </el-form-item>

      <!-- 课程封面-->
      <el-form-item label="图片" style="margin-top: 80px;" prop="cover">
        <SingleUpload v-model="courseInfo.cover"></SingleUpload>
      </el-form-item>

      <el-form-item label="是否模拟" style="margin-top: 80px;">
        <el-switch v-model="courseInfo.isMock" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>

      <el-form-item label="是否支持双人" style="margin-top: 80px;">
        <el-switch v-model="courseInfo.support" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import PaperKu from "@/components/question/PaperKu";
import SingleUpload from "@/components/upload/singleUpload";
import editor from "@/components/editor";

export default {
  data() {
    return {
      flag: false,
      saveBtnDisabled: false, // 保存按钮是否禁用
      courseInfo: {},
      id: null,

      dataRule: {
        title: [
          {
            required: true,
            message: "课程标题不能为空",
            trigger: "blur",
          },
        ],

        descriptions: [
          {
            required: true,
            message: "描述不能为空",
            trigger: "blur",
          },
        ],

        scoreTotal: [
          {
            required: true,
            message: "总课时不能为空",
            trigger: "blur",
          },
        ],

        timeHours: [
          {
            required: true,
            message: "总时间不能为空",
            trigger: "blur",
          },
        ],
         kuId: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],

        cover: [
          {
            required: true,
            message: "课程封面图片路径不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  components: {
    SingleUpload,
    editor,
    PaperKu,
  },
  created() {
    //获取路由id值
    if (this.$route.params && this.$route.query.id) {
      this.courseInfo.paperId = this.$route.query.id;
      // 根据id获取课程基本信息
      this.id = this.$route.query.id;
      this.getInfo();
    } else {
      this.courseInfo = {};
      this.flag = true;
    }
  },
  watch: {
    id(newName, oldName) {
      console.log(newName);
      console.log(oldName);
    },
  },
  methods: {
    //根据试卷id查询
    getInfo() {
      if (this.courseInfo.paperId) {
        this.$http({
          url: this.$http.adornUrl(
            `/tiku/paper/info/` + this.courseInfo.paperId
          ),
          method: "get",
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.courseInfo = data.paper;
            this.flag = true;
          }
        });
      }
    },

    saveOrUpdate() {
      // this.$router.push({
      //   path: "/tiku-shiti?id=" + 1,
      // });
      this.$refs["courseInfo"].validate((valid) => {
        if (valid) {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(
                `/tiku/paper/${!this.courseInfo.paperId ? "save" : "update"}`
              ),
              method: "post",
              data: this.$http.adornData(this.courseInfo),
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.$router.push({
                      path: "/tiku-shiti?id=" + data.id,
                    });
                  },
                });
              } else {
                this.$message.error(data.msg);
              }
            });
          }
        }
      });
    },
    getMsgFormSon(data) {
      this.courseInfo.descriptions = data;
    },
  },
};
</script>
